---
title: Getting started with LiveStore + Vue
description: How to use LiveStore with Vue.
sidebar:
  label: Vue
  order: 4
---

import { Steps, Tabs, TabItem, Code } from '@astrojs/starlight/components';
import { makeTiged, versionNpmSuffix } from '../../../data/data.ts'
import { MIN_NODE_VERSION } from '@local/shared'
import SchemaSnippet from '../../_assets/code/getting-started/vue/livestore/schema.ts?snippet'
import WorkerSnippet from '../../_assets/code/getting-started/vue/livestore/livestore.worker.ts?snippet'
import ViteConfigSnippet from '../../_assets/code/getting-started/vue/vite-config.ts?snippet'
import AppSnippet from '../../_assets/code/getting-started/vue/app.vue?snippet'
import CommitEventsSnippet from '../../_assets/code/getting-started/vue/commit-events.vue?snippet'
import QueriesSnippet from '../../_assets/code/getting-started/vue/queries.vue?snippet'

{/* We're adjusting the package to use the dev version on the dev branch */}
export const manualInstallDepsStr = [
  '@livestore/livestore' + versionNpmSuffix,
  '@livestore/wa-sqlite' + versionNpmSuffix,
  '@livestore/adapter-web' + versionNpmSuffix,
  '@livestore/utils' + versionNpmSuffix,
  '@livestore/peer-deps' + versionNpmSuffix,
  '@livestore/devtools-vite' + versionNpmSuffix,
  'slashv/vue-livestore' + versionNpmSuffix,
  'vue',
  '@vitejs/plugin-vue',
  'vite-plugin-vue-devtools',
].join(' ')

## Prerequisites

- Recommended: Bun 1.2 or higher
- Node.js {MIN_NODE_VERSION} or higher

## About Vue integration

Vue integration is still in beta and being incubated as a separate repository. Please direct any issues or contributions to [Vue LiveStore](https://github.com/slashv/vue-livestore)

## Option A: Quick start

For a quick start, we recommend referencing the [playground](https://github.com/slashv/vue-livestore/tree/main/playground) folder in the Vue LiveStore repository.

## Option B: Existing project setup \{#existing-project-setup\}

<Steps>

1. **Install dependencies**

   It's strongly recommended to use `bun` or `pnpm` for the simplest and most reliable dependency setup (see [note on package management](/misc/package-management) for more details).

   <Tabs syncKey="package-manager">
     <TabItem label="bun">
       <Code code={'bun install ' + manualInstallDepsStr} lang="sh" />
     </TabItem>
     <TabItem label="pnpm">
       <Code code={'pnpm add ' + manualInstallDepsStr} lang="sh" />
     </TabItem>
     <TabItem label="npm">
       <Code code={'npm install ' + manualInstallDepsStr} lang="sh" />
     </TabItem>
   </Tabs>

2. **Update Vite config**

   Add the following code to your `vite.config.js` file:

   <ViteConfigSnippet />

</Steps>

### Define your schema

Create a file named `schema.ts` inside the `src/livestore` folder. This file defines your LiveStore schema consisting of your app's event definitions (describing how data changes), derived state (i.e. SQLite tables), and materializers (how state is derived from events).

Here's an example schema:

<SchemaSnippet />

### Create the LiveStore worker

Create a file named `livestore.worker.ts` inside the `src/livestore` folder. This file will contain the LiveStore web worker. When importing this file, make sure to add the `?worker` extension to the import path to ensure that Vite treats it as a worker file.

<WorkerSnippet />

### Add the LiveStore provider

To make the LiveStore available throughout your app, wrap your app's root component with the `LiveStoreProvider` component from `vue-livestore`. This provider manages your app's data store, loading, and error states.

Here's an example:

<AppSnippet />

### Commit events

After wrapping your app with the `LiveStoreProvider`, you can use the `useStore` hook from any component to commit events.

Here's an example:

<CommitEventsSnippet />

### Queries

To retrieve data from the database, first define a query using `queryDb` from `@livestore/livestore`. Then, execute the query with the `useQuery` hook from `vue-livestore`.

Consider abstracting queries into a separate file to keep your code organized, though you can also define them directly within components if preferred.

Here's an example:

<QueriesSnippet />
